<template lang="html">
    <div class="mainpartbox">
    <div class="mainpart">
        <!-- 播放/暂停 -->
        <div class="playButt">
            <div class="playButtCon" :id="`playButtCon-${jgid}`">
                <Icon type="ios-pause"  v-if="playshow" />
                <Icon type="ios-play" v-else />
            </div>
        </div>
        <!-- 音频轨迹 -->
        <div class="audioTrack" :id="`audioTrack-${jgid}`">
            <!-- 进度百分比 -->
            <div class="audioPercentage" :id="`audioPercentage-${jgid}`" :style="{ width: accomplishData + unit}"></div>
            <!-- 圆点 -->
            <div class="audioDot" :id="`audioDot-${jgid}`" :style="{ left: dotData + unit}"></div>
        </div>
        <!-- 时间 -->
        <div class="timer">{{playtime}}<span style="margin: 0 2px">/</span>{{alltime}}</div>
        <!-- 原生音频文件 -->
        <div class="" style="display:none">
            <audio autobuffer controls="controls" :src="jgsrc" :id="`myAudio-${jgid}`"></audio>
        </div>
    </div>
    <div>

    <span>播放倍速：</span>
        <RadioGroup v-model="model" @on-change="changeaudio(model)">
            <Radio :label="item.id" v-for="item in RadioGroup" :key="item.id">{{ item.name }}</Radio>
        </RadioGroup>
    </div>
    </div>
</template>

<script>
    export default {
        name: '',
        props: {
            jgid: { type: [String, Number] },
            jgsrc: { type: String }
        },
        data () {
            return {
                model: 1,
                RadioGroup: [
                    { id: 0.75, name: '0.75' },
                    { id: 1, name: '1' },
                    { id: 1.5, name: '1.5' },
                    { id: 1.75, name: '1.75' },
                    { id: 2, name: '2' }
                ],
                playshow: false,
                altogetherTimer: '', // 音频总时长
                scheduleTimer: '', // 当前播放进度时间
                accomplishData: '', // 当前播放进度比
                dotData: '', // 圆点进度的位置
                unit: '%', // 单位
                timer: null,
                myAudio: null
            }
        },
        computed: {
            playtime () {
                let time = ''
                if (!this.scheduleTimer) {
                    time = '00:00'
                } else if (this.scheduleTimer < 60) {
                    time = `00:${this.doubleDigit(this.scheduleTimer)}`
                } else if (this.scheduleTimer < 3600) {
                    let snum = Math.floor(this.scheduleTimer / 60)
                    let gnum = this.scheduleTimer % 60
                    time = `${this.doubleDigit(snum)}:${this.doubleDigit(gnum)}`
                } else {
                    let bnum = Math.floor(this.scheduleTimer / 3600)
                    let snum = Math.floor((this.scheduleTimer % 3600) / 60)
                    let gnum = (this.scheduleTimer % 3600) % 60
                    time = `${this.doubleDigit(bnum)}:${this.doubleDigit(snum)}:${this.doubleDigit(gnum)}`
                }
                return time
            },
            alltime () {
                let time = ''
                if (!this.altogetherTimer) {
                    time = '00:00'
                } else if (this.altogetherTimer < 60) {
                    time = `00:${this.doubleDigit(this.altogetherTimer)}`
                } else if (this.altogetherTimer < 3600) {
                    let snum = Math.floor(this.altogetherTimer / 60)
                    let gnum = this.altogetherTimer % 60
                    time = `${this.doubleDigit(snum)}:${this.doubleDigit(gnum)}`
                } else {
                    let bnum = Math.floor(this.altogetherTimer / 3600)
                    let snum = Math.floor((this.altogetherTimer % 3600) / 60)
                    let gnum = (this.altogetherTimer % 3600) % 60
                    time = `${this.doubleDigit(bnum)}:${this.doubleDigit(snum)}:${this.doubleDigit(gnum)}`
                }
                return time
            }
        },
        mounted: function () {
            let that = this;
            this.myAudio = document.querySelector(`#myAudio-${this.jgid}`); // 音频
            let myAudio = document.querySelector(`#myAudio-${this.jgid}`); // 音频
            let audioTrack = document.querySelector(`#audioTrack-${this.jgid}`); // 音频轨迹
            let audioPercentage = document.querySelector(`#audioPercentage-${this.jgid}`); // 音频进度百分比
            let audioDot = document.querySelector(`#audioDot-${this.jgid}`); // 音频圆点
            let playButtCon = document.querySelector(`#playButtCon-${this.jgid}`); // 播放/暂停按钮
            myAudio.oncanplaythrough = function () {
                that.altogetherTimer = Math.round(myAudio.duration);
                playButtCon.onclick = function () {
                    // 如果当前音频是暂停状态，那么就播放，否者暂停
                    if (myAudio.paused) {
                        that.$emit('allpaused', that.jgid)
                        myAudio.play();
                        clearInterval(that.timer); // 清楚计时器
                        that.playshow = true
                        that.timer = setInterval(function () {
                            myAudioPlay(myAudio.currentTime / myAudio.duration); // 计算播放进度百分比
                            that.scheduleTimer = Math.round(myAudio.currentTime);
                            if (myAudio.currentTime == myAudio.duration) that.playshow = false
                        }, 250)
                    } else {
                        myAudio.pause();
                        clearInterval(that.timer); // 清楚计时器
                        that.playshow = false
                    }
                }
                // 正在播放时音频轨迹的状态
                function myAudioPlay (PercentageData) {
                    that.unit = '%';
                    that.accomplishData = PercentageData * 100
                    that.dotData = PercentageData * 100
                    if (that.dotData > 96) {
                        that.dotData = 96
                    }
                    if (myAudio.currentTime == myAudio.duration) {
                        that.playshow = true
                        clearInterval(that.timer);
                    }
                }
                // 点击音频轨迹
                audioTrack.addEventListener('touchstart', function (ev) {
                    let audioTrackW = audioTrack.offsetWidth; // 读取音频轨迹的长度
                    that.unit = 'px';
                    that.accomplishData = ev.targetTouches[0].clientX;
                    that.dotData = ev.targetTouches[0].clientX;
                    let cilckPercentage = ev.targetTouches[0].clientX / audioTrackW;
                    myAudio.currentTime = cilckPercentage * myAudio.duration;
                    that.timer = setInterval(function () {
                        myAudioPlay(myAudio.currentTime / myAudio.duration);
                        that.scheduleTimer = Math.round(myAudio.currentTime);
                        if (myAudio.currentTime == myAudio.duration) that.playshow = false
                    }, 100)
                    if (myAudio.paused) {
                        that.scheduleTimer = Math.round(myAudio.currentTime);
                        clearInterval(that.timer)
                    }
                }, false)
                // 拖动音频进度
                audioDot.addEventListener('touchstart', function (ev) {
                    clearInterval(that.timer); // 清楚计时器
                    let audioTrackW = audioTrack.offsetWidth; // 读取音频轨迹的长度
                    let oldX = ev.targetTouches[0].clientX - audioDot.offsetLeft; // 当前点击的位置 - 目标相对父级元素左边的距离
                    audioTrack.addEventListener('touchmove', funMove, false); // 音频轨迹添加 touchmove 事件
                    audioTrack.addEventListener('touchend', funEnd, false); // 音频轨迹添加 touchend 事件
                    function funMove (ev) {
                        let x = ev.targetTouches[0].clientX - oldX;
                        if (x >= audioTrackW) {
                            x = audioTrackW;
                        } else if (x <= 0) {
                            x = 0;
                        }
                        that.unit = 'px';
                        that.accomplishData = x;
                        that.dotData = x - 15;
                        // let newX = ev.changedTouches[0].clientX;
                        let oDiv2W = audioPercentage.offsetWidth;
                        let oDuration = oDiv2W / audioTrackW;
                        clearInterval(that.timer);
                        myAudio.currentTime = oDuration * myAudio.duration;
                        that.timer = setInterval(function () {
                            myAudioPlay(myAudio.currentTime / myAudio.duration);
                            that.scheduleTimer = Math.round(myAudio.currentTime);
                            if (myAudio.currentTime == myAudio.duration) that.playshow = false
                        }, 100)
                        if (myAudio.paused) {
                            that.scheduleTimer = Math.round(myAudio.currentTime);
                            clearInterval(that.timer)
                        }
                    }
                    function funEnd (ev) {
                        audioTrack.removeEventListener('touchend', funMove, false);
                        audioTrack.removeEventListener('touchmove', funEnd, false);
                    }
                }, false)
            }
        // }
        },
        methods: {
            initial () {
                if (this.myAudio) {
                    this.audiopause()
                }
            },
            doubleDigit (e) {
                let num = ''
                if (e < 10) num = `0${e}`
                else num = e
                return num
            },
            audiopause () {
                this.myAudio.pause();
                clearInterval(this.timer); // 清楚计时器
                this.playshow = false
            },
            changeaudio (model) {
                this.myAudio.playbackRate = model;
            }
        }
    }
</script>

<style lang="css" scoped>
.mainpartbox{
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 10px 5px;
  border-radius: 3px;
  background-color: rgba(0,0,0,.1);
}
.mainpart{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.audioTrack{
  width: 100%;
  height: 4px;
  border-radius: 2px;
  margin: 0 10px;
  position: relative;
  background-color: #bbb;
}
.audioPercentage{
  /* width: 25%; */
  height: 100%;
  position: absolute;
  top: 0;
  left: 0 ;
  background-color: rgba(0, 0, 0,.3);
}
.audioDot{
  /* width: 10px;
  height: 10px; */
  width:0;
  height:0;
  position: absolute;
  left: 0px;
  top: -3px;
  border-radius: 100%;
  background-color: #aaa
}
.playButt{
  /* width: 100%; */
  /* display: flex; */
  /* justify-content: center; */
  /* margin-top: 20px; */
}
.playButtCon{
  font-size: 18px;
  color: rgba(0, 0, 0,.5);
  font-weight:bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
